import React, { useState, useRef, useImperativeHandle, useEffect } from "react";

import { Modal } from 'antd'
import {FCForm} from "@components";
import { ControlType as TYPE } from "@components";
import { RULE_REQUIRED } from "@rules";

const modalFields = [
  { name: 'roleName', label: '角色名称', controlType: TYPE.INPUT, rules: [RULE_REQUIRED] },
  { name: 'isEmerRole', label: '是否是应急角色', controlType: TYPE.SELECT, codeKey: 'isEmerRole', rules: [RULE_REQUIRED] },
]

const ModalComponent = (props) => {

  const { modalRef, handleOnFinish } = props

  const [open, setOpen] = useState(false)

  // 暴露给父组件的方法
  useImperativeHandle(modalRef, () => ({
    showModal: () => setOpen(true),
  }))

  const formRef = useRef("formRef");
  const from = {
    name:"form",
    formRef:formRef,
    fields:modalFields,
    initialValues: {
      isEmerRole: '1',
    },
    onFinish: async (params) => {
      await handleOnFinish({roleCode: '', ...params, ownerMenuKeyCodeList: []})
      setOpen(false)
    },
    layoutProps: {
      layout: "horizonal",
      labelCol: {span: 8},
      wrapperCol: {span: 12},
    },
  };

  const handleOk = () => {
    formRef.current?.submit?.()
  };
  
  return (
    <Modal
      title='新增角色'
      className='modal'
      open={open}
      onOk={handleOk}
      bodyStyle={{padding: '24px 24px 0'}}
      onCancel={() => setOpen(false)}
      destroyOnClose={true}
    >
      <FCForm {...from}/>
    </Modal>
  );
};

export default React.memo(ModalComponent);
